<template>
  <div class="content">
    <div class="login">
      <van-nav-bar title="Jmash移动端" />
      <van-form @submit="onSubmit">
        <van-cell-group>
          <van-field
            v-model="loginData.username"
            name="usename"
            label=""
            autocomplete="usename"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="loginData.password"
            type="password"
            name="passord"
            label=""
            autocomplete="current-password"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-row justify="center">
            <van-col span="12">
              <van-button block type="primary" native-type="submit">登录</van-button></van-col
            >
          </van-row>
        </div>
      </van-form>
    </div>
  </div>
</template>

<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts" name="login">
import { ref } from "vue";
import { showToast } from "vant";
import { useRoute, useRouter } from "vue-router";
import { type LoginData } from "@/api/auth/types";
import { useUserStore } from "@/stores/modules/user";
import { netEncrypt } from "@/utils/netsecret";
import { storageUtil } from "@/utils/storage";
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
// 导入 Axios 实例
// import apiClient from '../utils/api';
const loginData = ref<LoginData>({ scope: "", username: "", password: "" });

const onSubmit = (values: any) => {
  loginData.value.password = netEncrypt(loginData.value.password);
  userStore
    .login(loginData.value)
    .then(() => {
      showToast("登录成功");
      let redirect = storageUtil.queryRedirect(route);
      router.push(redirect);
    })
    .catch(() => {
      showToast("用户名或密码错误");
    });
};
</script>
<style lang="scss" scoped>
.login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 16px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  :deep(.van-field__control) {
    height: 42px;
    line-height: 42px;
    background: #eee;
    text-align: center;
  }
  .tip {
    font-size: 12px;
    margin: 10px 20px;
    color: $font-color-gray;
  }
}
</style>
